<template>
    <div>
        <a-modal style="top: 5vh" okText='发送' width="50vw" cancelText='取消' ref="modalRef"
            v-model:visible="publishVisible" :wrap-style="{ overflow: 'hidden' }" @ok="submit" @cancel="cancel">
            <template #title>
                <div ref="modalTitleRef" style="width: 100%; cursor: move;font-weight:700">发布公告</div>
            </template>
            <a-card class='card' size="middle" title="受影响的区域" width="50vw">
                <a-table :pagination="false" class='table' size="small" :columns="columns"
                    :data-source="communityInfo" />
            </a-card>
            <div>
                <div class='input-title' style="font-weight:700">公告标题：</div>
                <a-input v-model:value="title" placeholder="请输入内容" :rows="4" />
                <div class='input-title' style="font-weight:700">公告信息：</div>
                <a-textarea v-model:value="content" placeholder="请输入内容" :rows="4" />
            </div>
            <template #modalRender="{ originVNode }">
                <div :style="transformStyle">
                    <component :is="originVNode" />
                </div>
            </template>
        </a-modal>
    </div>
</template>
<script setup>
import { message } from 'ant-design-vue';
import 'ant-design-vue/es/message/style/css'; //vite只能用 ant-design-vue/es 而非 ant-design-vue/lib
import { ref, computed, watch, watchEffect } from 'vue';
/* 按需加载的vue组件库 */
import { useDraggable } from '@vueuse/core';
import { useNoticeStore } from 'stores/NoticeStore.js'
import { storeToRefs } from 'pinia'
/* 导入全局事件的模块 */
import mitt from 'stores/mitt/index.js'
/* 导入封装的请求 */
import { addNotice } from 'request/notice'
/* 实现地图响应式 */
const { publishVisible } = storeToRefs(useNoticeStore())
/* 接收传过来的社区信息 */
const communityInfo = ref(null)
mitt.on('communityInfo', (res) => {
    console.log(res);
    console.log("接收社区信息");
    communityInfo.value = res
})
/* 绑定的输入框 */
const content = ref('')
const title = ref('')
/* 表格的列信息 */
const columns = [{
    title: '区域名称',
    dataIndex: 'name',
    key: 'name',
}, {
    title: '物业电话',
    dataIndex: 'tel',
    key: 'tel',
}
]
/* 输入完成时候的操作 */
const submit = async () => {
    console.log('输入完成');
    console.log(content.value);
    console.log(title.value);
    /* 判断输入内容是否为空 */
    if (content.value != "" && title.value != "") {
        const data = {
            "user_id": 3,
            "notice_title": title.value,
            "notice_content": content.value
        }
        const res = await addNotice(data)
        if (res.data.code == 0) {
            message.success("公告发布成功")
            publishVisible.value = false;
            /* 清空输入框 */
            title.value = ""
            content.value = ""
        }
    } else {
        message.error("请输入内容")
    }
};
const cancel = () => {
    message.warning("取消发送")
    title.value = ""
    content.value = ""
}
/* ------------------拖拽相关代码------------------ */
const modalTitleRef = ref(null);
const {
    x,
    y,
    isDragging,
} = useDraggable(modalTitleRef);
const startX = ref(0);
const startY = ref(0);
const startedDrag = ref(false);
const transformX = ref(0);
const transformY = ref(0);
const preTransformX = ref(0);
const preTransformY = ref(0);
const dragRect = ref({
    left: 0,
    right: 0,
    top: 0,
    bottom: 0,
});
watch([x, y], () => {
    if (!startedDrag.value) {
        startX.value = x.value;
        startY.value = y.value;
        const bodyRect = document.body.getBoundingClientRect();
        const titleRect = modalTitleRef.value.getBoundingClientRect();
        dragRect.value.right = bodyRect.width - titleRect.width;
        dragRect.value.bottom = bodyRect.height - titleRect.height;
        preTransformX.value = transformX.value;
        preTransformY.value = transformY.value;
    }
    startedDrag.value = true;
});
watch(isDragging, () => {
    if (!isDragging) {
        startedDrag.value = false;
    }
});
watchEffect(() => {
    if (startedDrag.value) {
        transformX.value = preTransformX.value + Math.min(Math.max(dragRect.value.left, x.value), dragRect.value.right) - startX.value;
        transformY.value = preTransformY.value + Math.min(Math.max(dragRect.value.top, y.value), dragRect.value.bottom) - startY.value;
    }
});
const transformStyle = computed(() => {
    return {
        transform: `translate(${transformX.value}px, ${transformY.value}px)`,
    };
});
</script>
<style scoped>
.table {
    max-height: 25vh;
    overflow-y: scroll;
    border: 1px solid rgb(245, 245, 245)
}

.input-title {
    margin: 1vh 0vh;
}
</style>